<template>
	<view class="w-full h-full pay-container flex-column">
		<view class="pay-header relative">
			<NavBar
				:title="null"
				titleColor="#FFFFFF"
				backIconColor="#FFFFFF"	
				background=""
				:isFixed="false"
			 />
		</view>
		<view class="flex-1 w-full pay-content">
			<view class="plate-form flex-column flex-center">
				<view class="flex-between mb-10">
					<text class="left-text">填写车牌号</text>
				</view>
				<Plate :plateNumber="plateNumber" :plateType="plateType" @myPlateChange="plateChange" />
			</view>
			<view class="flex-1 radio-container flex align-center mt-40">
				<u-radio-group v-model="plateType" active-color="#3A67D5" width="50%">
					<u-radio 
						label-size="26rpx"
						v-for="(item, index) in list" 
						:key="index" 
						:name="item.type"
					>
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</view>
			<view class="binding mt-30">
				<button v-if="isDisabled" class="buttom-primary-style" @click="handleNext">下一步</button>
				<view v-else class="buttom-secondary-style submit-button">下一步</view>
			</view>
		</view>
	</view>
</template>
<script>
import navBar from '@/components/nav-bar/index.vue';
import CarInfoForm from '../../../pages/my/components/car-info-form.vue'
import Plate from '@/components/plate/index.vue'
import { myTemporaryOrder, createTemporaryOrder } from '@/apis/base.js'
export default {
	components: {
		navBar,
		CarInfoForm,
		Plate,
	},
	data() {
		return {
			plateNumber: ['', '', '', '', '', '', '', ''],
			plateType: 2,
			list: [
				{
					name: '小车(蓝牌)',
					type: 2
				},
				{
					name: '小型新能源汽车',
					type: 4
				},
				{
					name: '大车',
					type: 1
				},
				{
					name: '大型新能源汽车',
					type: 3
				}
			],
		}
	},
	computed: {
		isDisabled () {
			if (this.plateType !== '' && this.plateNumber.join(',').length > 4) {
				return true
			}
			return false
		}
	},
	onShareAppMessage(res) {
	    if (res.from === 'button') {
	      console.log(res.target)
	    }
	    return {
	      title: '品讯泊车',
	      path: '/pages/home/index'
	    }
	  },
	onShareTimeline(res){
		  return {
			title: '品讯泊车',
			imageUrl:'/static/parking/logo.png',
		}
	},
	methods: {
		plateChange(val) {
			this.plateNumber = val
		},
		handleNext () {
			const userInfo = uni.getStorageSync("user_info")
			this.plateNumber.length = [1,2].includes(this.plateType) ? 7 : 8
			createTemporaryOrder ({plate: this.plateNumber.join(',').replace(/,/g, ''), type: this.plateType, parkId: '', userPhone: userInfo.phonenumber}).then(res => {
				console.log('res', res.data)
				if (res.data) {
					uni.navigateTo({
						url: '/pagesB/pages/quick-payment/quick-pay?orderNo='+ res.data
					})
				}
			}) 
			// myTemporaryOrder({plate: this.plateNumber.join(',').replace(/,/g, ''), type: this.plateType}).then(res => {
			// 	if (res.rows && res.rows.length) {
			// 		console.log('res',res.rows)
			// 		uni.navigateTo({
			// 			url: '/pagesB/pages/quick-payment/quick-pay?orderNo='+ res.rows[0].orderNo
			// 		})
			// 	} else {
			// 		uni.showModal({
			// 			title: '无记录',
			// 			content: `暂未查到 ${this.plateNumber.join(',').replace(/,/g, '')} 的停车记录，请重新输入车牌号`,
			// 			showCancel: false,
			// 			success: function (res) {
			// 				if (res.confirm) {
			// 					console.log(2)
			// 				}
			// 			}
			// 		})
			// 	}
			// })
		}
	},
}
</script>
<style lang='scss' scoped>
	.pay-container{
		
	}
	.pay-header{
		width: 100%;
		height: 504rpx;
		background-image: url('/static/parking/pay.png');
		background-size: 100% 100%;
	}
	.pay-content{
		padding: 30rpx;
		position: relative;
		top: -200rpx;
	}
	.plate-form{
		height: 193rpx;
		background-image: url('@/static/my/plate-bg.png');
		background-size: 100% 100%;
		padding: 0 20rpx;
		z-index: 999;
		.left-text{
			font-family: PingFang SC;
			font-size: 30rpx;
			font-weight: 500;
			line-height: 42rpx;
			color: #222222;
			position: relative;
			top: -12rpx;
		}
	}
	.binding{
		height: 86rpx;
		button{
			font-size: 32rpx !important;
		}
	}
</style>